<template>
  <div class="register">
    <!-- 注册功能思路
    1、布局 element-ui
    2、数据绑定 v-model
    3、表单验证 
    表单：model、rules、
    表单项：prop
    第二次确认密码的验证方式：自定义函数校验
    4、发送验证码
    5、注册接口对接ajax
    6、注册成功
    a、自动直接登录
    b、跳转到登录页让用户再次登录
     -->
    <el-form :model="userInfo" ref="form" :rules="rules" class="form">
      <el-form-item class="form-item" prop="username">
        <el-input placeholder="用户名手机" v-model="userInfo.username">
        </el-input>
      </el-form-item>

      <el-form-item class="form-item" prop="captcha">
        <el-input placeholder="验证码" v-model="userInfo.captcha">
          <template slot="append">
            <el-button @click="handleSendCaptcha"> 发送验证码 </el-button>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item class="form-item" prop="nickname">
        <el-input placeholder="你的名字" v-model="userInfo.nickname">
        </el-input>
      </el-form-item>

      <el-form-item class="form-item" prop="password">
        <el-input
          placeholder="密码"
          type="password"
          v-model="userInfo.password"
        ></el-input>
      </el-form-item>

      <el-form-item class="form-item" prop="checkPassword">
        <el-input
          placeholder="确认密码"
          type="password"
          v-model="userInfo.checkPassword"
        >
        </el-input>
      </el-form-item>

      <el-button class="submit" type="primary" @click="handleRegSubmit">
        注册
      </el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    //   由于校验函数只是在data中使用
    // 可以不需要卸载method中
    let validatepass2 = (rules, value, callback) => {
      // callback 这个形参是element 传入的一个固定回调函数
      // 校验完成就需要执行
      // 1、如果校验合法直接执行，没有参数
      // 2、如不合法，就要带上一个错误对象参数new Error('两次输入密码不一致')
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.userInfo.password) {
        callback(new Error("两次输入密码不一致"));
      } else {
        callback();
      }
    };
    return {
      userInfo: {
        username: "", // 登录用户名/手机
        password: "", // 登录密码
        checkPassword: "", // 确认密码
        nickname: "", // 昵称
        captcha: "", // 手机验证码
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入必填信息",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入必填信息",
            trigger: "blur",
          },
        ],

        nickname: [
          {
            required: true,
            message: "请输入必填信息",
            trigger: "blur",
          },
        ],
        captcha: [
          {
            required: true,
            message: "请输入必填信息",
            trigger: "blur",
          },
        ],
        // 这里的校验并非默认自带的校验方法---需要自定义，所以判定标准和提示语都要自己写
        // 给一个函数作为validator即可
        checkPassword: [{ validator: validatepass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    //   发送验证码 ajax请求
    handleSendCaptcha() {
      const regexp = /^1[3456789]\d{9}$/;
      if (!regexp.test(this.userInfo.username)) {
        this.$confirm("手机号码不能为空", "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          type: "warning",
        });
        return;
      }
      this.$axios({
        method: "post",
        url: "/captchas",
        data: {
          tel: this.userInfo.username,
        },
      }).then((res) => {
        console.log(res);
        if (res.data.code) {
          this.$message.success("成功获取验证码" + res.data.code);
        }
      });
    },
    // 提交注册
    handleRegSubmit() {
      //   console.log(this.userInfo);
      // 发送请求前对数据的二次验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 剩余运算符
          const { checkPassword, ...data } = this.userInfo;
          console.log(data);
          this.$axios({
            method: "post",
            url: "/accounts/register",
            data,
          }).then((res) => {
            // console.log(res);

            if (res.data.token) {
              //   注册成功--直接自动登录
              //   this.$store.commit("userstore/setuserInfo", res.data);
              //   this.$message.success("注册成功");
              //   this.$router.push("/");
              // 注册成功--跳转登录组件让用户再次登录
              this.$message.success("注册成功");
              this.$emit("tologin");
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.form {
  padding: 25px;
}

.form-item {
  margin-bottom: 20px;
}

.form-text {
  font-size: 12px;
  color: #409eff;
  text-align: right;
  line-height: 1;
}

.submit {
  width: 100%;
  margin-top: 10px;
}
</style>